<template>
  <div class='goodslist-container'>
    
    <ul>
        <li v-for='item in goodslist' :key='item.id' @click='goDatail(item.id)'>
            <img :src="item.img_url" alt="">
            <h1>{{item.title}}</h1>
            <div class='info'>
                <p class='price'><span>￥{{item.sell_price}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<s>￥{{item.market_price}}</s>   </p>
                <p class='sail'><span>热卖中</span><span>剩余{{item.stock_quantity}}件</span></p>
            </div>
        </li>

    </ul>
    <mt-button type='danger' size='large' plain @click='getGoodsList'>加载更多</mt-button>
  </div>
</template>
<script>
    export default{
        data(){
            return {
                goodslist:[],
                pageIndex:1
            }
        },
        created(){
            this.getGoodsList();
           
        },      
        methods:{
            getGoodsList(){
                this.$http.get('api/getgoods?pageindex='+this.pageIndex).then(results=>{
                    console.log(results.body);
                    if(results.body.status===0){
                        this.goodslist=this.goodslist.concat(results.body.message);
                        this.pageIndex++;
                    }else{
                        Toast('获取失败')
                    }
                })
            },
            goDatail(id){
                console.log(this.$router)
                // 对象的形式
                // this.$router.push({path:'/home/goodsInfo/'+id})
                // 命名的路由
                this.$router.push({name:'goodsInfo',params:{id} })
            },
           
        }
    }
</script>
<style scoped lang='scss'>
.goodslist-container{
    padding:7px;

    ul{
        display: flex;
        flex-wrap:wrap;
        justify-content:space-between;
         padding:0;
          margin:0;
        li{           
            list-style:none;
            width:49%;
            border:1px solid #ccc;
            margin:4px 0;
            box-shadow:0 0 8px #ccc;
            padding:3px;
            display: flex;
            flex-direction:column;
            justify-content:space-between;
            min-height:290px;
            img{
                width:100%;                
                // height:168px;
            }
            h1{
                font-size:14px;
            }
            .info{
                background-color: #eee;
                padding:5px;
                bottom:0;
                .price{
                    span{
                        font-weight:bold;
                        color:red;
                          font-size:14px;
                    }
                    s{
                        font-size:12px;
                    }
                }
                .sail{
                    margin:0;
                    display: flex;
                    justify-content:space-between;
                }
            }
        }
    }
}
</style>
